﻿@model GPS.MODELS.LoginViewModel
@using CaptchaMvc.HtmlHelpers
@using CaptchaMvc


@{
    ViewBag.Title = "Đăng nhập";
}

@{
    Layout = "~/Views/Shared/_Layout_Login.cshtml";
}

<style>
    /* Reset CSS */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }

    body {
        /*background: #DCDDDF url(../fonts/7AF2Qzt.png);*/
        color: #000;
        font: 14px Arial;
        margin: 0 auto;
        padding: 0;
        position: relative;
        /* Responsive Full Background Image  */
        /* Location of the image */
        background-image: url(../fonts/login_bg1.jpg);
        /* Background image is centered vertically and horizontally at all times */
        background-position: center center;
        /* Background image doesn't tile */
        background-repeat: no-repeat;
        /* Background image is fixed in the viewport so that it doesn't move when
     the content's height is greater than the image's height */
        background-attachment: fixed;
        /* This is what makes the background image rescale based
     on the container's size */
        background-size: cover;
        /* Set a background color that will be displayed
     while the background image is loading */
        background-color: #464646;
    }

    h1 {
        font-size: 28px;
    }

    h2 {
        font-size: 26px;
    }

    h3 {
        font-size: 18px;
    }

    h4 {
        font-size: 16px;
    }

    h5 {
        font-size: 14px;
    }

    h6 {
        font-size: 12px;
    }

    h1, h2, h3, h4, h5, h6 {
        color: #563D64;
    }

    small {
        font-size: 10px;
    }

    b, strong {
        font-weight: bold;
    }

    a {
        text-decoration: none;
    }

        a:hover {
            text-decoration: underline;
        }

    .left {
        float: left;
    }

    .right {
        float: right;
    }

    .alignleft {
        float: left;
        margin-right: 15px;
    }

    .alignright {
        float: right;
        margin-left: 15px;
    }

    .clearfix:after,
    form:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

    .container {
        margin: 25px auto;
        position: relative;
        width: 900px;
    }

    #loginForm {
        background: #f9f9f9;
        background: -moz-linear-gradient(top, rgba(248,248,248,1) 0%, rgba(249,249,249,1) 100%);
        background: -webkit-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
        background: -o-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
        background: -ms-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
        background: linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#f9f9f9',GradientType=0 );
        -webkit-box-shadow: 0 1px 0 #fff inset;
        -moz-box-shadow: 0 1px 0 #fff inset;
        -ms-box-shadow: 0 1px 0 #fff inset;
        -o-box-shadow: 0 1px 0 #fff inset;
        box-shadow: 0 1px 0 #fff inset;
        border: 1px solid #c4c6ca;
        margin: 0 auto;
        padding: 25px 0 0;
        position: relative;
        text-align: center;
        text-shadow: 0 1px 0 #fff;
        width: 400px;
    }

        #loginForm h1 {
            color: #7E7E7E;
            font: bold 25px Helvetica, Arial, sans-serif;
            letter-spacing: -0.05em;
            line-height: 20px;
            margin: 10px 0 30px;
        }

            #loginForm h1:before,
            #loginForm h1:after {
                content: "";
                height: 1px;
                position: absolute;
                top: 10px;
                width: 27%;
            }

            #loginForm h1:after {
                background: rgb(126,126,126);
                background: -moz-linear-gradient(left, rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
                background: -webkit-linear-gradient(left, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
                background: -o-linear-gradient(left, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
                background: -ms-linear-gradient(left, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
                background: linear-gradient(left, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
                right: 0;
            }

            #loginForm h1:before {
                background: rgb(126,126,126);
                background: -moz-linear-gradient(right, rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
                background: -webkit-linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
                background: -o-linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
                background: -ms-linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
                background: linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
                left: 0;
            }

        #loginForm:after,
        #loginForm:before {
            background: #f9f9f9;
            background: -moz-linear-gradient(top, rgba(248,248,248,1) 0%, rgba(249,249,249,1) 100%);
            background: -webkit-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
            background: -o-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
            background: -ms-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
            background: linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#f9f9f9',GradientType=0 );
            border: 1px solid #c4c6ca;
            content: "";
            display: block;
            height: 100%;
            left: -1px;
            position: absolute;
            width: 100%;
        }

        #loginForm:after {
            -webkit-transform: rotate(2deg);
            -moz-transform: rotate(2deg);
            -ms-transform: rotate(2deg);
            -o-transform: rotate(2deg);
            transform: rotate(2deg);
            top: 0;
            z-index: -1;
        }

        #loginForm:before {
            -webkit-transform: rotate(-3deg);
            -moz-transform: rotate(-3deg);
            -ms-transform: rotate(-3deg);
            -o-transform: rotate(-3deg);
            transform: rotate(-3deg);
            top: 0;
            z-index: -2;
        }

        #loginForm form {
            margin: 0 20px;
            position: relative;
        }

            #loginForm form input[type="text"][name="UserName"],
            #loginForm form input[type="password"][name="Password"] {
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                -ms-border-radius: 3px;
                -o-border-radius: 3px;
                border-radius: 3px;
                -webkit-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
                -moz-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
                -ms-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
                -o-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
                box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
                -webkit-transition: all 0.5s ease;
                -moz-transition: all 0.5s ease;
                -ms-transition: all 0.5s ease;
                -o-transition: all 0.5s ease;
                transition: all 0.5s ease;
                background: #eae7e7 url(../fonts/8bcLQqF.png) no-repeat;
                border: 1px solid #c8c8c8;
                color: #777;
                font: 13px Helvetica, Arial, sans-serif;
                margin: 0 0 10px;
                padding: 15px 10px 15px 40px;
                width: 80%;
            }

            #loginForm form input[type="text"]:focus,
            #loginForm form input[type="password"]:focus {
                -webkit-box-shadow: 0 0 2px #ed1c24 inset;
                -moz-box-shadow: 0 0 2px #ed1c24 inset;
                -ms-box-shadow: 0 0 2px #ed1c24 inset;
                -o-box-shadow: 0 0 2px #ed1c24 inset;
                box-shadow: 0 0 2px #ed1c24 inset;
                background-color: #fff;
                border: 1px solid #ed1c24;
                outline: none;
            }


            #loginForm form input[type="text"][name="CaptchaInputText"] {
                border: medium none;
                padding: 6px;
                border: 1px solid #cdcdcd;
                font-size: 12px;
                font-family: Arial, Tahoma;
            }

    #username {
        background-position: 10px 10px !important;
    }

    #password {
        background-position: 10px -53px !important;
    }

    #loginForm form input[type="submit"] {
        background: rgb(254,231,154);
        background: -moz-linear-gradient(top, rgba(254,231,154,1) 0%, rgba(254,193,81,1) 100%);
        background: -webkit-linear-gradient(top, rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
        background: -o-linear-gradient(top, rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
        background: -ms-linear-gradient(top, rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
        background: linear-gradient(top, rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fee79a', endColorstr='#fec151',GradientType=0 );
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        -ms-border-radius: 30px;
        -o-border-radius: 30px;
        border-radius: 30px;
        -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
        -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
        -ms-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
        -o-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
        box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
        border: 1px solid #D69E31;
        color: #85592e;
        cursor: pointer;
        float: left;
        font: bold 15px Helvetica, Arial, sans-serif;
        height: 35px;
        margin: 20px 0 35px 15px;
        position: relative;
        text-shadow: 0 1px 0 rgba(255,255,255,0.5);
        width: 120px;
    }

        #loginForm form input[type="submit"]:hover {
            background: rgb(254,193,81);
            background: -moz-linear-gradient(top, rgba(254,193,81,1) 0%, rgba(254,231,154,1) 100%);
            background: -webkit-linear-gradient(top, rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
            background: -o-linear-gradient(top, rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
            background: -ms-linear-gradient(top, rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
            background: linear-gradient(top, rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fec151', endColorstr='#fee79a',GradientType=0 );
        }

    #loginForm form div a {
        color: #004a80;
        float: right;
        font-size: 12px;
        margin: 30px 15px 0 0;
        text-decoration: underline;
    }

    .button {
        background: rgb(247,249,250);
        background: -moz-linear-gradient(top, rgba(247,249,250,1) 0%, rgba(240,240,240,1) 100%);
        background: -webkit-linear-gradient(top, rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
        background: -o-linear-gradient(top, rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
        background: -ms-linear-gradient(top, rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
        background: linear-gradient(top, rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f9fa', endColorstr='#f0f0f0',GradientType=0 );
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
        -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
        -ms-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
        -o-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
        box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
        -webkit-border-radius: 0 0 5px 5px;
        -moz-border-radius: 0 0 5px 5px;
        -o-border-radius: 0 0 5px 5px;
        -ms-border-radius: 0 0 5px 5px;
        border-radius: 0 0 5px 5px;
        border-top: 1px solid #CFD5D9;
        padding: 15px 0;
    }

        .button a {
            background: url(../fonts/8bcLQqF.png) 0 -112px no-repeat;
            color: #7E7E7E;
            font-size: 17px;
            padding: 2px 0 2px 40px;
            text-decoration: none;
            -webkit-transition: all 0.3s ease;
            -moz-transition: all 0.3s ease;
            -ms-transition: all 0.3s ease;
            -o-transition: all 0.3s ease;
            transition: all 0.3s ease;
        }

            .button a:hover {
                background-position: 0 -135px;
                color: #00aeef;
            }
</style>


@*<div class="row">
        <div class="col-md-8">
            <section id="loginForm">
                @using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
                {
                    @Html.AntiForgeryToken()
                    <hr />
                    @Html.ValidationSummary(true)
                    <div class="form-group">
                        @Html.Label("Tên đăng nhập", new { @class = "col-md-2 control-label" })
                        <div class="col-md-10">
                            @Html.TextBoxFor(m => m.UserName, new { @class = "form-control" })
                            @Html.ValidationMessageFor(m => m.UserName)
                        </div>
                    </div>
                    <div class="form-group">
                        @Html.Label("Mật khẩu", new { @class = "col-md-2 control-label" })
                        <div class="col-md-10">
                            @Html.PasswordFor(m => m.Password, new { @class = "form-control" })
                            @Html.ValidationMessageFor(m => m.Password)
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-offset-2 col-md-10">
                            <div class="checkbox">
                                @Html.CheckBoxFor(m => m.RememberMe)
                                @Html.LabelFor(m => m.RememberMe)
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-offset-2 col-md-10">
                            <input type="submit" value="Đăng nhập" class="btn btn-default" />
                        </div>
                    </div>
                    <p>
                        @Html.ActionLink("Đăng ký", "Register") nếu bạn chưa có tài khoản.
                    </p>
                }
            </section>
        </div>
    </div>*@



<div class="container">
    <section id="loginForm">
        @using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
        {
            @Html.AntiForgeryToken()

            <h1>Đăng nhập</h1>
            <div>
                @Html.TextBoxFor(m => m.UserName, new { @placeholder = "Tên đăng nhập", @id = "username" })
            </div>
            <div>@Html.ValidationMessageFor(m => m.UserName)</div>
            <div>
                @Html.PasswordFor(m => m.Password, new { @placeholder = "Mật khẩu", @id = "password" })
            </div>
            <div>
                @Html.ValidationMessageFor(m => m.Password)
                @Html.ValidationSummary(true)
            </div>

            <div>
                @Html.Captcha("Làm mới", "Nhập mã kiểm tra", 5, "Is required field", true)
            </div>
            <br />
            <p class="text-danger">  @ViewBag.ErrMessage </p>



            <div style="text-align:center;">
                <input type="submit" value="Đăng nhập" />
                @*<a href="#">Lost your password?</a>*@
                @*<a href="#">Đăng ký</a>*@
            </div>
        }
    </section><!-- content -->
</div><!-- container -->
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}